<template>
	<pai-popup v-model="isShow" width="74%" mode="center" @close="close" :mask-close-able="maskClose"
		border-radius="14">
		<view class="input-container" @click.stop="">
			<text class="title">{{title}}</text>
			<text class="content">{{content}}</text>
			<view class="btn-layout">
				<view class="cancel-btn" v-if="showCancel" @click="cancel">取消</view>
				<view class="confirm-btn" @click="confirm">{{confirmText}}</view>
			</view>
		</view>
	</pai-popup>
</template>

<script>
	import paiPopup from './pai-popup.vue'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			showCancel: {
				type: Boolean,
				default: true
			},
			maskClose: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ""
			},
			content: {
				type: String,
				default: "",
			},
			confirmText: {
				type: String,
				default: "确认",
			}
		},
		components: {
			paiPopup
		},
		data() {
			return {
				isShow: false
			}
		},
		watch: {
			show: {
				handler(newVal, oldVal) {
					this.isShow = newVal
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			confirm() {
				this.$emit('confirm', false)
			},
			close() {
				this.$emit('cancel', false)
			},
			cancel() {
				this.$emit('cancel', false)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.input-container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), #ffffff);
	}

	.title {
		height: 60rpx;
		color: rgba(0, 0, 0, 0.65);
		font-size: 28rpx;
		line-height: 60rpx;
		margin-top: 24rpx;
	}

	.content {
		margin-top: 24rpx;
		min-height: 80rpx;
		color: rgba(0, 0, 0, 0.75);
		font-size: 28rpx;
		padding: 0rpx 32rpx;
	}

	.btn-layout {
		width: 100%;
		height: 80rpx;
		display: flex;
		margin-top: 40rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		justify-content: space-around;
	}

	.cancel-btn {
		flex: 1;
		color: rgba(0, 0, 0, 0.65);
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		border-right: 1px solid rgba(0, 0, 0, 0.05);
	}

	.confirm-btn {
		flex: 1;
		color: #2D63CA;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>